<script >
export default {
  name: 'TestFooter',
  props: {
    todoList: Array,
  },
  methods: {
    clearDone() {
      this.$bus.$emit('clearDone')
    },
    changeAll($event) {
      this.$bus.$emit('changeAll', $event.target.checked)
    },
  },
  computed: {
    doneNumber() {
      return this.todoList.filter(item => item.done).length;
    },
    allDone() {
      return this.todoList.length === this.doneNumber;
    },

  },
}

</script>

<template>
<div>
  <div class="test-footer">
    <div class="test-footer-left">
      <div class="checkbox" >
        <input @change="changeAll($event)" type="checkbox" :checked="allDone"  />
      </div>
      <div class="test-footer-left-text" style="margin-left: 20px;">
        <span>{{doneNumber}}/{{todoList.length}} </span>
      </div>
      <div class="test-footer-left-button">
        <button @click="clearDone">清除已完成</button>
      </div>
    </div>

  </div>
</div>
</template>

<style scoped>
.test-footer {
  margin-top: 20px;
  display: flex;
  justify-content: space-between; /* 使元素在水平方向上两端对齐 */
}
.test-footer-left {
  margin-left: 35px;
  flex: 1;
  display: flex;
}
.test-footer-left-button {
  flex: 1;
  display: flex;
  margin-left: 20px;
  float: right;
}
</style>